<template>
  <!-- 卡片视图区域 -->
  <el-card>
    <div class="box">
      <div id="main" style="width: 650px; height: 750px"></div>
      <div id="main2" style="width: 650px; height: 750px"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      option: {
        title: {
          text: '用户来源地区',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },

        yAxis: {
          type: 'category',
          data: []
        },

        series: [
          {
            type: 'bar',
            data: []
          }
        ]
      },
      option2: {
        title: {
          text: '用户性别比例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '性别',
            type: 'pie',
            data: [],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 50,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            }
          }
        ]
      }
    }
  },
  watch: {
    option: {
      handler(newVal, oldVal) {
        if (newVal) {
          // this.init()
        }
      },
      deep: true
      // immediate: true
    }
  },
  methods: {
    init() {
      var myChart = echarts.init(document.getElementById('main'))
      var myChart2 = echarts.init(document.getElementById('main2'))
      this.option && myChart.setOption(this.option)
      this.option2 && myChart2.setOption(this.option2)
    },
    async getdata() {
      //获取用户省份

      const { data: res } = await this.$http.get('/user/getProvince')

      var list = []
      var province = [] //省份
      var sexList = [] //性别
      if (res.code === 200) {
        list = res.data
      }
      list.forEach(item => {
        province.push(item.addr.split(' ')[0])
        sexList.push(item.sex)
      })
      //性别饼状图
      var dataObj = []
      var sexcount = sexList.reduce((obj, sex) => {
        if (sex === 1) {
          sex = '男'
        } else {
          sex = '女'
        }
        if (sex in obj) {
          obj[sex]++
        } else {
          obj[sex] = 1
        }
        return obj
      }, {})

      var man = Object.keys(sexcount) //男 女
      var num = Object.values(sexcount) //性别个数
      for (let i = 0; i < num.length; i++) {
        dataObj.push({
          value: num[i],
          name: man[i]
        })
      }
      //用户来源地区柱形图
      var count = province.reduce((obj, pro) => {
        if (pro in obj) {
          obj[pro]++
        } else {
          obj[pro] = 1
        }
        return obj
      }, {})

      var data1 = Object.keys(count) //省份
      var data2 = Object.values(count) //个数
      this.option.yAxis.data = data1
      this.option.series[0].data = data2
      this.option2.series[0].data = dataObj
      //获取用户省份
      this.init()
      /* var myChart = echarts.init(document.getElementById('main'))
    var myChart2 = echarts.init(document.getElementById('main2'))
    this.option && myChart.setOption(this.option)
    this.option2 && myChart2.setOption(this.option2) */
    }
  },
  created() {
    this.getdata()
  },
  mounted() {
    /* this.$nextTick是异步微任务
async await是异步宏任务，
异步微任务先执行，在执行宏任务
所以使用this.$nextTick不能在获取数据之后执行
*/
    /* this.$nextTick(() => {
      console.log('next mounted')
      this.init()
    }) */
  }
}
</script>

<style lang="less" scoped>
.box {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
